<template>
  <div>
    <el-select
      class="ml10 w200"
      v-model="filmCode"
      popper-class="cinema-group-select-pop"
      placeholder="请选择适用影片"
      clearable
      multiple
      @focus="handleShow"
    >
    <el-option
      v-for="item in filmAllData"
      :key="item.id"
      :label="item.filmName"
      :value="item.filmCode"
    >
    </el-option>
    </el-select>
    <!-- 指定影片选择弹窗 -->
    <choose-film
      v-if="chooseFilmParams.visible"
      v-model="chooseFilmParams.visible"
      @handle-after="handleAfter"
      :selected-id="filmCode"
    ></choose-film>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import ChooseFilm from './components/ChooseFilm'
import cloudApis from '@/api/src/cloud'
export default {
  name: 'FilmSelector',
  components: {ChooseFilm},
  mixins: [tableMixin],
  props: {
    value: {
      type: [String, Number]
    }
  },
  data () {
    return {
      chooseFilmParams: {
        visible: false
      },
      filmAllData: [] // 执行影片->指定影片回调数据保存
    }
  },
  computed: {
    filmCode: {
      get () {
        if (this.value && this.value.length > 0) {
          return this.value.split(',')
        } else {
          return []
        }
      },
      set (val) {
        this.$emit('input', val.join(','))
      }
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    // 数据回填处理
    async init () {
      let _arr = []
      if (this.value && this.value.length > 0) {
        // 请求全部影片数据，匹配对应的数据用于展示名称
        const _res = await cloudApis.getFilmPageList({filmCode: this.value, pageSize: 999})
        this.filmAllData = _res.list
        // this.filmAllData = _res.list.filter(i => _arr.includes(i.filmCode))
      }
    },
    handleShow () {
      this.chooseFilmParams = {
        visible: true
      }
    },
    // 执行影片回调
    handleAfter (val) {
      this.filmAllData = val
      this.filmCode = val.map((i) => i.filmCode)
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
